// 通过JS方式渲染 vue 组件

// 1.导入目标组件
import XtxMessage from "./XtxMessage";
import { createVNode, render } from "vue";
let timer = null;
// 2.创建一个组件的渲染容器
const container = document.createElement("div");
document.body.appendChild(container);

export default function Message({ type, text }) {
  console.log(type, text);
  // 3.将目标单文件vue组件渲染成虚拟DOM
  const vNode = createVNode(XtxMessage, { type, text });
  // 4.将组件的虚拟DOM对象渲染成真实DOM对 并且将其渲染到container容器中
  render(vNode, container);

  clearTimeout(timer);
  // 三秒后隐藏
  timer = setTimeout(() => {
    // 这样隐藏没有离场动画
    // render(null, container);
    vNode.component.proxy.show = false;
    // 重置DOM对象
    container._vnode = null;
  }, 3000);
}
